<template>
    <div>
        <div class="top">
            <div class="tab tab_on">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>商品日志</span>
                <button class="tab_right tab_on_right" @click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
        </div>
        <div id="logbookTab">
            <div class="tab">
                <span class="tab_left"><i class="Icon el-icon-s-grid"></i> 日志数据列表</span>
                <button class="tab_right" @click="tabledateAll">展示全部</button>
            </div>
            <!-- 表格 -->
            <el-table  border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                <el-table-column
                        align="center"
                        type="selection"
                        width="56">
                </el-table-column>
                <!-- 对应字段写好-->
                <el-table-column align="center" prop="logbookProductCode" sortable label="编号" width="130">
                </el-table-column>
                <el-table-column align="center" prop="logbookProductName" label="商品名称" width="180">
                </el-table-column>
                <el-table-column align="center" prop="logbookOrignalpriceProduct" sortable label="销售价格" width="160">
                </el-table-column>
                <el-table-column align="center" prop="logbookCurrentpriceProduct" sortable label="促销价格" width="160">
                </el-table-column>
                <el-table-column align="center" prop="logbookProductSate" label="上架下架" width="185">
                </el-table-column>
                <el-table-column align="center" prop="logbookResult" label="审核状态" width="185">
                </el-table-column>
                <el-table-column align="center" prop="logbookUpdateUser" label="更新人" sortable width="140">
                </el-table-column>
                <el-table-column align="center" prop="logbookUpdateDate" label="更新时间" sortable width="190">
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1,5,10,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        props:['product'],
        inject:['reload'],
        data() {
            return {
                //操作日志表格数据
                tableData: [],//可能会有变动
                tableData2:[],//过度数据用的
                tableData3:[],//不会变的所有商品数据
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
            }
        },

        methods: {
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //创建一个方法传入后台数据(表Table)
            tabledate(){
                this.$http.get("/getCommodity",{
                    params:{
                        parentId:this.product
                    }
                }).then(res => {
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                });
            },
            //展示全部
            tabledateAll(){
                this.$http.get("/getCommodity",{
                }).then(res => {
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                });
            }
        },
        //先调用一下传入数据的方法
        created(){
            this.tabledate();
        }

    };



</script>
<style>
    /*背景色*/
    body{
        background: #F9F9F9;
    }
    /*头*/
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
/*    表格*/
    #logbookTab{
        margin: 0px 0px 0px 0px;
    }
</style>